import React, { useState, useCallback, useMemo } from 'react';
import Button from './button';

// export default class ResumeIndex extends React.Component<any> {
//     render() {
//         return (
//             <div>
//                 <p>ResumeIndex</p>
//             </div>
//         );
//     }
// }

function ResumeIndex() {
    const [count1, setCount1] = useState(0);
    const [count2, setCount2] = useState(0);
    const [count3, setCount3] = useState(0);
    const [count4, setCount4] = useState(0);

    const handleClickButton1 = () => {
        setCount1(count1 + 1);
    };

    const handleClickButton2 = useCallback(() => {
        setCount2(count2 + 1);
    }, [count2]);

    // const handleClickButton4 = useMemo(() => {
    //     return setCount4;
    // }, [count4]);

    return (
        <div>
            <div>
                <Button onClickButton={handleClickButton1}>Button1</Button>
            </div>
            <div>
                <Button onClickButton={handleClickButton2}>Button2</Button>
            </div>
            <div>
                <Button
                    onClickButton={() => {
                        setCount3(count3 + 1);
                    }}
                >
                    Button3
                </Button>
            </div>
            {/* <div>
                <Button onClickButton={handleClickButton4(count4 + 1)}>Button4</Button>
            </div> */}
        </div>
    );
}

export default ResumeIndex;
